<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>CVRM2021 Debugger</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css"
          integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
            integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
            crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
            integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
            crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js"
            integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
            crossorigin="anonymous"></script>
</head>

<body>
<h1>CVRM2021 Debugger</h1>
<h2>实时视频</h2>
<ul class="video_link">
    {% for name in video_names %}
    <li><a href="/video/{{name}}">{{ name }}</a></li>
    {% endfor %}
</ul>

<h2>参数设置</h2>
<ul>
    {% for name, param in params_info %}
    <li>
        <span> {{ name }} </span>
        <input id="range_{{ name }}" , type="range" ,
               min="{{ param.min_value }}" ,
               max="{{ param.max_value }}" ,
               step="{{ param.step_value }}" ,
               value="{{ param.current_value }}" ,
               onchange="range_onchange('{{ name }}')">
        <span id="value_{{ name }}"> {{ param.current_value }} </span>
    </li>
    {% endfor %}
</ul>

<h2>自定义按键</h2>
<ul>
    {% for name, button in buttons_info %}
    <li>
        <button id="button_{{ name }}" type="button" onclick="button_onclick('{{ name }}')">{{ name }}</button>
    </li>
    {% endfor %}
</ul>

<h2>自定义复选框</h2>
<ul>
    {% for name, checkbox in checkboxes_info %}
    <li>
        {% if checkbox.checked %}
            <input id="checkbox_{{ name }}" type="checkbox" onclick="checkbox_onclick('{{ name }}')" checked>
        {% else %}
            <input id="checkbox_{{ name }}" type="checkbox" onclick="checkbox_onclick('{{ name }}')">
        {% endif %}
        <span>{{ name }}</span>
    </li>
    {% endfor %}
</ul>

<script type="text/javascript">
    function range_onchange(name) {
        var value = document.getElementById("range_" + name).value;
        document.getElementById("value_" + name).innerHTML = value;
        var xml = new XMLHttpRequest();
        xml.open("get", "/setting/" + name + "?current_value=" + value);
        xml.send();
    }

    function button_onclick(name) {
        var xml = new XMLHttpRequest();
        xml.open("get", "/button/" + name);
        xml.send();
    }

    function checkbox_onclick(name) {
        var checked = document.getElementById("checkbox_" + name).checked;
        var xml = new XMLHttpRequest();
        xml.open("get", "/checkbox/" + name + "?checked=" + checked);
        xml.send();
    }

</script>
</body>

</html>